<template>
  <div class="back">
    <x-header :left-options="{backText: ''}"
              style="font-size:20px;
                    letter-spacing: 3px;
                    background: rgb(0, 160, 233);">{{dormitory}}宿舍人员名单</x-header>
    <flexbox>
      <flexbox-item>
        <div class="flex-box">共{{allbed}}床铺</div>
      </flexbox-item>
      <flexbox-item>
        <div class="flex-box">已住{{arrive}}床铺</div>
      </flexbox-item>
      <flexbox-item>
        <div class="flex-box">剩余{{left}}床铺</div>
      </flexbox-item>
    </flexbox>
    <x-table full-bordered
             style="background-color:#fff;width:90%;margin:0 auto;">
      <thead>
        <tr>
          <th>学院</th>
          <th>姓名</th>
          <th>班级</th>
        </tr>
      </thead>
      <tbody v-for="(row,index) in roommate"
             :key="index">
        <tr>
          <td>{{row.academy}}</td>
          <td>{{row.name}}</td>
          <td>{{row.classes}}</td>
        </tr>
      </tbody>
    </x-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dormitory: "",
      allbed: 0,
      arrive: 0,
      left: 0,
      roommate: []
    };
  },
  methods: {},
  mounted() {
    let _this = this;
    let dorms = JSON.parse(window.localStorage.getItem("clidorm"));
    if (dorms == null) {
      this.$router.push("/admin/login");
    } else {
      _this.dormitory = dorms.dormitory_num + dorms.house_num;
      _this.allbed = dorms.size;
      _this.arrive = dorms.arrive_num;
      _this.left = dorms.size - dorms.arrive_num;
      let dormId = dorms.id;
      let params = new URLSearchParams();
      params.append("id", dormId);
      _this
        .axios({
          method: "get",
          url: "/student/showStuByDorId",
          params
        })
        .then(resp => {
          if (resp.data.code == 0) {
            _this.roommate = resp.data.result;
          } else if (resp.data.code == 2) {
            _this.$router.push("/admin/login");
          }
        });
    }
  }
};
</script>

<style scoped>
.back {
  height: 100vh;
  background: #fff;
}
.flex-box {
  font-size: 12px;
  color: rgba(102, 102, 102, 1);
}
/* vux.class.vux-flexbox */
.vux-flexbox {
  text-align: center;
  margin: 5px;
}
p {
  width: 100%;
  padding: 18px 0px;
  font-size: 20px;
  text-align: center;
  letter-spacing: 3px;
}
th {
  color: #666;
  font-weight: BOLDER;
  font-size: 18px;
}
</style>


